/**
 * 项目轮播
 * @class Carousel
 * @extends Basic
 * @author 杜慧玲
 *
 * 示例：
 *
 *     @example
 *     <Carousel>
 *         <li>1</li>
 *         <li>2</li>
 *         <li>3</li>
 *     </Carousel>
 */
var Carousel = React.createClass({
    getDefaultProps:function(){
        return{
            data:this.props.data,
            activeIdx:this.props.activeIdx ? this.props.activeIdx:1,
            interval:400,
            intSpeed:50,
            autoPlay: this.props.autoPlay ? this.props.autoPlay : true,
            autoPlaySpeed: this.props.autoPlaySpeed ? this.props.autoPlaySpeed:5000
        }
    },
    getInitialState:function(){
        return{
            _width:0,
            distance:0,
            activeIdx:this.props.activeIdx,
            _children:[]
        }
    },
    _prev:function(){
        var _this = this;
        var curr = _this.state.activeIdx,
            len = _this.props.children.length,
            _distance = _this.state.distance;
        var _nodeUL = _this.refs.scroll;
        var t;

        var beforeNum;
        if(curr - 2 < 0){
            beforeNum = len + (curr - 2);
        }else{
            beforeNum = curr - 2;
        }
        curr - 1 < 0 ? _this.state.activeIdx = len - 1 : _this.state.activeIdx--;

        _nodeUL.insertBefore(
            _this.props.children[beforeNum],_nodeUL.childNodes[0]
        );
        _nodeUL.style.left = (-_distance) + "px";

        var _orgWidth = Number(_nodeUL.style.left.slice(0, -2));
        var interval = _this.props.interval;

        t = setInterval(function(){
            if(interval > 0){
                _nodeUL.style.left = (_orgWidth + _distance * _this.props.intSpeed / _this.props.interval) + "px";
                _orgWidth = Number((_orgWidth + _distance * _this.props.intSpeed / _this.props.interval).toFixed(2));
                interval -= _this.props.intSpeed;
                _this.refs.prev.disabled = true;
            }else{
                _nodeUL.childNodes[2].className = "";
                _nodeUL.childNodes[1].className = "active";
                _nodeUL.style.left = "0px";
                _this.refs.prev.disabled = false;
                clearInterval(t);
            }
        },_this.props.intSpeed);
    },
    _next:function(){
        var _this = this;
        var curr = _this.state.activeIdx,
            len = _this.props.children.length,
            _distance = _this.state.distance;
        var _nodeUL = _this.refs.scroll;
        var t;

        var beforeNum;
        if(curr - 1 < 0){
            beforeNum = len + (curr - 1);
        }else{
            beforeNum = curr - 1;
        }

        curr + 1 > len - 1 ? _this.state.activeIdx = 0 : _this.state.activeIdx++;

        var _orgWidth = Number(_nodeUL.style.left.slice(0, -2));
        var interval = _this.props.interval;

        t = setInterval(function(){
            if(interval > 0){
                _nodeUL.style.left = (_orgWidth - _distance * _this.props.intSpeed / _this.props.interval) + "px";
                _orgWidth = Number((_orgWidth - _distance * _this.props.intSpeed / _this.props.interval).toFixed(2));
                interval -= _this.props.intSpeed;
                _this.refs.next.disabled = true;
            }else{
                _nodeUL.childNodes[1].className = "";
                _nodeUL.childNodes[2].className = "active";
                _nodeUL.appendChild(
                    _this.props.children[beforeNum]
                );
                _nodeUL.style.left = "0px";
                _this.refs.next.disabled = false;
                clearInterval(t);
            }
        },_this.props.intSpeed);
    },
    mouseEnterHandler: function(){
        if(this.timer){
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    mouseLeaveHandler: function(){
        var _this = this;
        _this.timer = null;
        if(_this.props.autoPlay && _this.props.children.length > 3){
            _this.timer = setInterval(function(){
                _this._next();
            },_this.props.autoPlaySpeed);
        }
    },
    componentDidMount:function(){
        var _this = this;
        var len = _this.props.children.length,
            _nodeUL = _this.refs.scroll;

        if(len > 3){
            _this.state.distance = _this.props.children[0].offsetWidth;
            _this.props.children[_this.props.activeIdx].className = "active";
            var _w = 0;
            for(var i = 0;i < len;i++){
                _w += _this.props.children[i].offsetWidth;
            }
            _nodeUL.style.width = _w + "px";

            //自动轮播
            _this.mouseLeaveHandler();
        }else{
            _nodeUL.style.width = "100%";
            if(len > 1){
                _this.props.children[1].className = "active";
            }
        }

        if (window.addEventListener) {
            document.addEventListener('visibilitychange',function(){
                if(document.visibilityState == 'hidden') {
                    _this.mouseEnterHandler();
                } else{
                    _this.mouseLeaveHandler();
                }
            });
        }else{
            document.attachEvent('visibilitychange',function(){
                if(document.visibilityState == 'hidden') {
                    _this.mouseEnterHandler();
                } else{
                    _this.mouseLeaveHandler();
                }
            });
        }

    },
    render:function(){
        var _this = this;
        var len = _this.props.children.length;
        return(
            <div className="ucs-carousel" onmouseenter={_this.mouseEnterHandler.bind(_this)} onmouseleave={_this.mouseLeaveHandler.bind(_this)}>
                {len > 3 ?
                    <button disabled={false} ref="prev" className="ucs-carousel-prev iconfont icon-arrow-left" onClick={this._prev}></button> : ""
                }
                <div style={{overflow:"hidden",position:"relative",height:"570px"}}>
                    <ul ref="scroll" className="project-item" style={{width:this.state._width+"px",position:"absolute",left:"0px"}}>
                        {this.props.children}
                    </ul>
                </div>
                {len > 3 ?
                    <button disabled={false} ref="next" className="ucs-carousel-next iconfont icon-arrow-right" onClick={this._next}></button> : ""
                }
            </div>
        )
    }
});
module.exports = Carousel;